<template>
  <div class="common-body">
    <!-- 面包屑 -->
    <breadcrumb
      :breadcrumbArr="jsList.breadcrumbArr"
      :breadcrumbLastItem="breadcrumbLastItem"
      state="detail"
      @handleBack="handleBack"
    />

    <div
      v-if="isTrue"
      :class="[
        isInForce ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
    >
      <!--  主体左侧内容  -->
      <div :class="[!isInForce ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!isInForce" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          :class="[
            !isInForce
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <el-tab-pane label="基本信息" name="first">
              <detailBaseInfo
                ref="baseInfo"
                labelWidth="130px"
                :formList="setBaseFormList"
                :detail="{
                  ...detailInfo.smpPcConc,
                  ...detailInfo.smpEnabledRecordBO
                }"
              />
            </el-tab-pane>

            <el-tab-pane label="财务信息" name="second">
              <financeInfo
                ref="financial"
                :detail="detailInfo.pcFinance || []"
              />
            </el-tab-pane>

            <el-tab-pane label="采购清单" name="third">
              <oneLineTable
                ref="purchaseList"
                showSummary
                :summaryArr="summaryArr"
                :tableTheadOptions="baseJsObj.purchaseTableThead"
                :oneLineTableData="detailInfo.smpConcMatLessList"
              />
            </el-tab-pane>

            <el-tab-pane label="使用范围" name="fourth">
              <oneLineTable
                ref="useRange"
                :tableTheadOptions="baseJsObj.useRangeTableThead"
                :oneLineTableData="detailInfo.smpUsableRange"
              />
            </el-tab-pane>

            <el-tab-pane label="付款方式" name="fifth">
              <paymentMode ref="paymentMode" :detail="detailInfo" />
            </el-tab-pane>

            <el-tab-pane label="合同附件" name="sixth">
              <contractAnnex
                ref="contractAnnex"
                isTab
                v-model="uploadList"
                state="detail"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--  右边审批状态  -->
      <approvalReadRecord
        v-if="!isInForce"
        :approvalRecordData="approvalRecordData"
      />
    </div>

    <!--  底部导航栏及签名导出  -->
    <bottomGuide
      v-if="isTrue"
      busiType="100"
      pageType="smptransportconc/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import jsList from "../js";
import baseJsObj from "@/app/contractManagement/transportContract/contractDraft/js";
import { cloneDeep } from "lodash";
import contractComponent from "@/app/contractManagement/components";
import publicComponent from "@/basa/components/public";
import Mixin from "../mixins";
import { getSmpPcConc } from "@/app/contractManagement/transportContract/contractDraft/api";
import { proxyDateFormat } from "@/basa/utils";
import { selectByConcIdAndSonType } from "@/basa/api";

export default {
  mixins: [Mixin],
  components: {
    financeInfo: contractComponent.detailFinanceInfo,
    paymentMode: contractComponent.detailPaymentMode,
    detailBaseInfo: publicComponent.detailBaseInfo,
    oneLineTable: publicComponent.oneLineTable,
    contractAnnex: publicComponent.uploadInfo,
    approvalReadRecord: publicComponent.approvalRecord,
    breadcrumb: publicComponent.breadcrumb,
    bottomGuide: publicComponent.bottomGuide
  },
  data() {
    const that = this;
    return {
      jsList,
      baseJsObj,
      activeName: "first",
      breadcrumbLastItem: "",
      businessCode: "",
      name: "",
      isTrue: false,
      detailInfo: {},
      tabStyle: {},
      approvalRecordData: [],
      approvingType: {
        0: "pending", //待审批
        1: "approving", // 审批中
        3: "approvaled", // 审批通过
        4: "sendback", // 已退回
        2: "withdrawn" // 已撤回
      },
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      summaryArr: [
        "currentNum",
        "currentChangeAmtExcludeTax",
        "currentChangeAmtIncludeTax"
      ],
      contractState: "",
      setBaseFormList: [],
      baseFormDetail: {},
      isInForce: false,
      uploadList: [],
      selectByConcFile: {
        businessSonType: 2, // 业务子类型   2生效  3变更
        concId: that.$route.query.id, // 合同id
        businessType: 2, // 业务类型   1物资  2运输
        isShow: 0 // 1显示  0不显示
      }
    };
  },
  activated() {
    this.getSmpPcConc();
  },
  methods: {
    // 获取详情
    async getSmpPcConc() {
      const { id, recordId } = this.$route.query;
      const data = {
        concId: id,
        takeEffectId: recordId || "",
        isShowWorkflow: 1
      };

      const { data: fileData } = await selectByConcIdAndSonType(
        this.selectByConcFile
      );

      getSmpPcConc(data)
        .then(res => {
          const {
            data: { data }
          } = res;
          this.setDate(data);
          const jsFormList1 = cloneDeep(jsList.baseFormList1);
          // 获取businessCode
          this.businessCode = data.smpPcConc.contractCode;
          // 币种判断
          if (data.smpPcConc.currencyName === "人民币") {
            const i = jsFormList1.findIndex(
              _ => _.titleContent === "chExchangeRate"
            );
            jsFormList1.splice(i, 1);
            const j = jsFormList1.findIndex(
              _ => _.titleContent === "exchangeRateRefDate"
            );
            jsFormList1.splice(j, 1);
          }
          // 兑美元美元汇率
          if (
            data.smpPcConc.isOverseas !== 3 &&
            !["人民币", "美元"].includes(data.smpPcConc.currencyName)
          ) {
            const i = jsFormList1.findIndex(
              _ => _.titleContent === "currencyName"
            );
            jsFormList1.splice(i, 0, {
              label: "兑美元汇率",
              titleContent: "usExchangeRate"
            });
          }
          // 多税率判断
          if (data.smpPcConc.multiRateCode === 0) {
            const i = jsFormList1.findIndex(
              _ => _.titleContent === "taxRatePercent"
            );
            jsFormList1.splice(i, 1);
          }
          // 是否浮动合同价格判断
          if (data.smpPcConc.isFloatContractPrice === 1) {
            const i = jsFormList1.findIndex(
              _ => _.titleContent === "floatDesc"
            );
            jsFormList1.splice(i, 1);
          }

          if (["5", "9", "12"].includes(data.smpPcConc.contractState)) {
            this.setBaseFormList = [
              ...jsList.baseFormList,
              { label: "合同正式编码", titleContent: "formalContractCode" },
              { label: "生效日期", titleContent: "enabledDate" },
              ...jsFormList1
            ];
          } else {
            this.setBaseFormList = [...jsList.baseFormList, ...jsFormList1];
          }

          // 使用范围处理时间
          data.smpUsableRange = data.smpUsableRange.map(n => ({
            ...n,
            operationTimeStr: n.operationTime
              ? proxyDateFormat(n.operationTime)
              : ""
          }));
          // 是否浮动合同价格
          data.smpPcConc.isFloatContractPrice = baseJsObj.whetherList.find(
            _ => _.dicKey === data.smpPcConc.isFloatContractPrice
          ).dicValue;

          // 是否海外采购
          data.smpPcConc.isOverseas = baseJsObj.isOverseasList.find(
            _ => _.value === data.smpPcConc.isOverseas
          ).label;

          // 多税率
          data.smpPcConc.multiRateCode = baseJsObj.whetherList.find(
            _ => _.dicKey === data.smpPcConc.multiRateCode
          ).dicValue;

          // 基础信息金额
          data.smpPcConc = {
            ...data.smpPcConc,
            initTotalContractPriceIncludeTax:
              data.smpPcConc.initTotalContractPriceIncludeTax !== null
                ? data.smpPcConc.initTotalContractPriceIncludeTax.toFixed(2)
                : "",
            initTotalConractPriceExcludeTax:
              data.smpPcConc.initTotalConractPriceExcludeTax !== null
                ? data.smpPcConc.initTotalConractPriceExcludeTax.toFixed(2)
                : ""
          };

          // 清单设置地区
          if (data.smpConcMatLessList.length) {
            data.smpConcMatLessList = data.smpConcMatLessList.map(n => ({
              ...n,
              currentNum: n.currentNum !== null ? n.currentNum.toFixed(3) : "",
              currentUnitPriceExcludeTax:
                n.currentUnitPriceExcludeTax !== null
                  ? n.currentUnitPriceExcludeTax.toFixed(2)
                  : "",
              currentChangeAmtExcludeTax:
                n.currentChangeAmtExcludeTax !== null
                  ? n.currentChangeAmtExcludeTax.toFixed(2)
                  : "",
              currentUnitPriceIncludeTax:
                n.currentUnitPriceIncludeTax !== null
                  ? n.currentUnitPriceIncludeTax.toFixed(2)
                  : "",
              currentChangeAmtIncludeTax:
                n.currentChangeAmtIncludeTax !== null
                  ? n.currentChangeAmtIncludeTax.toFixed(2)
                  : "",
              rate: n.rate !== null ? n.rate.toFixed(2) : "",
              address:
                (n.deliveryAreaName || "") +
                (n.provinceName || "") +
                (n.cityName || "") +
                (n.countyName || "") +
                (n.deliveryPoints || "") // 交货地点
            }));
          }

          // 赋值
          this.uploadList = [...data.concFiles, ...fileData.data];
          this.breadcrumbLastItem = data.smpPcConc.contractName;
          this.isInForce = ["5", "9", "12"].includes(
            data.smpPcConc.contractState
          );
          this.approving = this.approvingType[data.smpPcConc.checkState];

          data.smpPcConc = Object.assign(
            data.smpPcConc,
            data.pcFinance[0] || {}
          );
          this.detailInfo = Object.assign(data, {
            state: "detail"
          });

          this.approvalRecordData = data.approveRecords;
          this.approvingStatus = false;
          this.isTrue = true;
          this.$nextTick(() => {
            this.approvingStatus = true;
          });
        })
        .catch(e => {});
    },

    // 时间处理
    setDate(item) {
      // 循环数组
      if (Array.isArray(item)) {
        item.map(Item => {
          this.setDate(Item);
        });
      } else {
        // 循环对象
        for (var key in item) {
          if (item[key]) {
            if (key.indexOf("Date") != -1) {
              item[key] = item[key].split(" ")[0];
            }
            // 判断类型为 对象类型 循环
            if (item[key] instanceof Object) {
              this.setDate(item[key]);
            }
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
